<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论详情</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body style="background-color: yellowgreen " class="container">
<br/><br/>
<br/><br/>

<!--登录的用户信息-->
<div style="text-align: center">
    <input type="hidden" id="uid" th:value="${user.uid}">
    <h1 th:text="'亲爱的'+${user.nickname}+'，欢迎您来到睡眠论坛！'"/>
</div>
<br>

<!--父话题-->
<div style="background-color: lightskyblue; margin: 20px 30px" th:object="${comment}">
    <!--    <h1>父话题</h1>-->
    <input id="cid" type="hidden" th:value="${comment.cid}"/>
    <div th:if="*{isFine == 1}">加精评论</div>
    <h2 th:text="*{nickname}+'说:'">nickname</h2>
    <span style="color: gray" th:text="*{cDate}">cDate</span>
    <div th:text="*{cContent}">cContent</div>
</div>
<br>

<!--子话题-->
<!--表格内容-->
<div>
    <!--    <h1>评论</h1>-->
    <script src="../../layer/layer.js"></script>
    <!--bootstrapTable表头-->
    <div class="with:80%">
        <table id="comment-table" class="table table-striped table-bordered">
            <caption style="text-align: center;color: red;font-size: 50px">评论</caption>
        </table>
    </div>

    <!--bootstrapTable内容-->
    <script>
        $(function () {
            function getIsFineString(value, row, index) {
                let isFine = row.isFine;
                if (isFine) {
                    return [
                        '<span>加精</span>'
                    ].join('');
                } else {
                    return [
                        '<span>普通</span>'
                    ].join('');
                }

            }

            $("#comment-table").bootstrapTable({
                url: "/comment/info-data",//数据地址
                striped: true,//是否显示行的间隔
                pageNumber: 1,//初始化加载第几页
                pagination: true,//是否分页
                sidePagination: 'server',
                pageSize: 10,
                pageList: [10, 15, 20],
                showRefresh: true,
                queryParams: function (params) {
                    var temp = {
                        offset: params.offset,
                        limit: params.limit,
                        pageSize: params.pageSize,
                        cTargetId: $("#cid").val(),
                    };
                    return temp;
                },
                columns: [
                    // {
                    //     title: "编号",
                    //     field: "cid",
                    //     sortable: true
                    // },
                    {
                        title: "昵称",
                        field: "nickname",
                        sortable: false
                    },
                    {
                        title: "内容",
                        field: "cContent",
                        sortable: false
                    },
                    {
                        title: "是否加精",
                        field: "isFine",
                        // sortable: false,
                        formatter: getIsFineString//将代号转为文字
                    },
                    {
                        title: "发表时间",
                        field: "cDate",
                        sortable: false
                    }
                ]
            });
        });
    </script>
</div>
<!--<div th:each="comment : ${commentList}" th:value="${comment.cid}">-->
<!--    <input type="hidden" th:value="${comment.cid}"/>-->
<!--    <div th:text="${comment.nickname}">nickname</div>-->
<!--    <div th:text="${comment.cDate}">cDate</div>-->
<!--    <div th:text="${comment.cContent}">cContent</div>-->
<!--    <br/>-->
<!--</div>-->

<!--编辑器-->
<div>
    <h3 style="color: blueviolet">快来发表你的看法吧！</h3>
    <!--编辑器-->
    <div style="margin: 0 auto">
        <textarea id="cContent" cols="155" rows="10" style="OVERFLOW:hidden; resize:none"></textarea>
        <br/>
        <input style="float: right; margin-right: 10px;margin-bottom :  100px" type="button" id="send" th:value="发送"
               class="btn btn-info">
        <input style="float: right; margin-right: 10px;margin-bottom :  100px" type="button" id="clean" th:value="清空"
               class="btn btn-info">
    </div>
    <!--编辑器按钮的js-->
    <script>
        $(function () {
            $("#send").click(function () {
                let uid = $("#uid").val();
                let cTargetId = $("#cid").val();
                let cContent = $("#cContent").val();
                console.log("uid---" + uid);
                console.log("cTargetId---" + cTargetId);
                console.log("cContent----" + cContent);
                $.get('/comment/add-data', {
                        uid: uid,
                        cTargetId: cTargetId,
                        cContent: cContent
                    }, function (data) {
                        data = eval("(" + data + ")");
                        layer.msg("<em style='color:red'>" + data.result + "</em>", {icon: 6});
                        $("#cContent").val("");
                        $("#comment-table").bootstrapTable('refresh', "/comment/info-data");
                    }
                );
            });

            $("#clean").click(function () {
                $("#cContent").val("");
            });
        });
    </script>
</div>

</body>
</html>